<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul class="nav">
				<li>
					<span>网站首页</span>
					<ul class="float-window">
					</ul>
				</li>
				<li>
					<span>学院概况</span>
					<ul class="float-window">
						<li>
							<a href="demo10-非canvas实现油罐展示.html">学校简介</a>
						</li>
						<li>
							<a href="https://www.htu.edu.cn/9058/list.htm">历史沿革</a>
							</li>
						<li>
							<a href="https://www.htu.edu.cn/_t3769/9059/list.psp">领导介绍</a>
							</li>
					</ul>
				</li>
				<li>
					<span>机构设置</span>
					<ul class="float-window">
						<li>学院设置</li>
						<li>党群机构</li>
						<li>行政管理</li>
					</ul>
				</li>
				<li>
					<span>学科建设</span>
					<ul class="float-window">
						<li>科研平台</li>
						<li>特色学科</li>
						<li>优势学科</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

	<style>
		* {
			margin: 0px;
			padding: 0px;
		}

		li {
			list-style: none;
			padding: 10px 20px;
			text-align: center;
		}
		a{
			text-decoration: none;
		}

		.nav {
			display: inline-block;
			color: white;
			background-color: #2a63b3;
		}

		.nav>li {
			float: left;
		}

		.nav li:nth-child(n) {
			position: relative;
		}

		.float-window {
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			background-color: rgba(42, 99, 179, 0.5);
			visibility: hidden;
		}

		.float-window li {
			padding: 10px;
		}

		.nav li:nth-child(n):hover .float-window {
			visibility: visible;
		}
	</style>
</html>
